<template>
  <div id="app">
    <!--<span>{{title}}</span>-->
    <!--头部开始  -->
    <div class="one-head">
      <div class="one-head-inner">
        <a href="http://localhost:8888/#/"><img src="../assets/img/logo.png"></a>
        <span id="logo-title">花果山</span>
      
        <div class="head-nav">
          <ul class="nav-list">
            <li><a @click="logClick">登录</a></li>
            <li class="nav-pile">|</li>
            <li><a @click="regClick">注册</a></li>
            <li class="nav-pile">|</li>
            <li><a @click="aboutClick">关于</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!--头部结束-->
    <!--导航栏开始-->
    <div class="index-top">
      <template v-for="product in productList">
        <ul>
          <li v-for="item in productList.list">
            <a :href="item.url">{{ item.name }}</a>
            <span v-if="item.hot" class="hot-tag">HOT</span>
            <span v-if="item.totalItem" class="text-danger"  v-text="totalItem" ></span>
          </li>
        </ul>
      </template>
    </div>
    <!--导航栏结束-->

    <My-login :is-show="isShowLogin" @on-close="closeLogin" >
      <template>
        <div id="box">
          <form action="" id="signin-form" method="post" ><br>
            <img src="../assets/img/logo.png"  width="100"  height="auto" alt="">
            <h1>花果山</h1><br>
            <div>
              <input type="text" id="input-form1" placeholder="用户名" name="name">
            </div>
            <div id="" style="margin: 20px 0;">
              <input type="password" id="input-form" placeholder="密码" name="password">
            </div>
            <button type="submit" id="loginbtn-form">登&nbsp;&nbsp;&nbsp;&nbsp;录</button><br><br>
            <span id="signup">还没有账户，立即<a @click="regClick" style="cursor:pointer">请注册</a></span>
          </form>
        </div>
      </template>

    </My-login>
    <My-login :is-show="isShowReg" @on-close="closeLogin" >
      <template>
        <div id="box">
          <form action="" id="signin-form" method="post" ><br>
            <img src="../assets/img/logo.png"  width="100"  height="auto" alt="">
            <h1>花果山</h1><br>
            <div>
              <input type="text" id="input-form1" placeholder="用户名" name="name">
            </div>
            <div id="" style="margin: 20px 0;">
              <input type="password" id="input-form" placeholder="密码" name="password">
            </div>
            <div id="" style="margin: 20px 0;">
              <input type="password" id="input-form" placeholder="再次输入密码" name="password">
            </div>
            <button type="submit" id="loginbtn-form">注&nbsp;&nbsp;&nbsp;&nbsp;册</button><br><br>
            <span id="signup">已有账户？立即<a @click="logClick" style="cursor:pointer">登录</a></span>
          </form>
        </div>
      </template>
    </My-login>
    <My-login :is-show="isShowAbout" @on-close="closeLogin" >
      <p>333</p>
    </My-login>


    <!--<My-login :is-show="isShowLogin" @on-close="closeLogin" >-->
      <!--<div class="login-box">-->
        <!--<h1 class="title">登 录</h1>-->
        <!--<div class="login-form">-->
          <!--<form>-->
            <!--<div class="user-name">-->
              <!--<label for="user"><i class="am-icon-user"></i></label>-->
              <!--<input type="text" name="" id="user" placeholder="邮箱/手机/用户名">-->
            <!--</div><br>-->
            <!--<div class="user-pass">-->
              <!--<label for="password"><i class="am-icon-lock"></i></label>-->
              <!--<input type="password" name="" id="password" placeholder="请输入密码">-->
            <!--</div>-->
          <!--</form>-->
        <!--</div>-->
      <!--</div>-->
      <!--<input type="submit" name="" value="登 录" class="log-btn">-->
      <!--<input type="submit" name="" value="注 册" class="log-btn">-->
    <!--</My-login>-->
    <!--<My-login :is-show="isShowReg" @on-close="closeLogin" >-->
      <!--<div class="login-box">-->
        <!--<h1 class="title">注 册</h1>-->
        <!--<div class="login-form">-->
          <!--<form>-->
            <!--<div class="user-name">-->
              <!--<label for="user"><i class="am-icon-user"></i></label>-->
              <!--<input type="text" name="" id="user" placeholder="邮箱/手机/用户名">-->
            <!--</div><br>-->
            <!--<div class="user-pass">-->
              <!--<label for="password"><i class="am-icon-lock"></i></label>-->
              <!--<input type="password" name="" id="password" placeholder="请输入密码">-->
            <!--</div><br>-->
            <!--<div class="user-pass">-->
              <!--<label for="password"><i class="am-icon-lock"></i></label>-->
              <!--<input type="password" name="" id="password" placeholder="请再次输入密码">-->
            <!--</div>-->
          <!--</form>-->
        <!--</div>-->
      <!--</div>-->
      <!--<input type="submit" name="" value="登 录" class="log-btn">-->
      <!--<input type="submit" name="" value="注 册" class="log-btn">-->
    <!--</My-login>-->
    <!--<My-login :is-show="isShowAbout" @on-close="closeLogin" >-->
      <!--<p>333</p>-->
    <!--</My-login>-->
  </div>
</template>

<script>
  import Login from './login.vue'
  import { mapState } from 'vuex'
  export default {
    name: 'app',
    components:{
      MyLogin:Login
    },
    data () {
      return {
        isShowLogin: false,
        isShowReg: false,
        isShowAbout: false,
        invTime:2000,
        productList:{
          list:[
            {
              name:'苹果',
              url:'/#/detail/apple'
            },
            {
              name:'莓果',
              url:'/#/detail/berry  '
            },
            {
              name:'热带水果',
              url:'/#/detail/hotfruit',
              hot:true
            },
            {
              name:'奇异果',
              url:'/#/detail/kiwi'
            },
            {
              name:'哈密瓜',
              url:'/#/detail/melon'
            },
            {
              name:'橙子/桃子',
              url:'/#/detail/peach'
            },
            {
              name:'购物车',
              url:'/#/cart',
              totalItem:true
            },
          ]
        },
      }
    },
    computed: {
      ...mapState({
        added: state => state.cart.added
      }),
      totalItem () {
        //return this.added.length
        return this.$store.state.cart.added.length
      },
      route () {
        return this.$route.path
      }
    },
    methods: {
      aboutClick () {
        this.isShowAbout = true
      },
      logClick () {
        this.isShowLogin = true;
        this.isShowReg = false
      },
      regClick () {
        this.isShowReg = true
      },
      closeLogin () {
        this.isShowLogin = false
        this.isShowReg = false
        this.isShowAbout = false
      }
    }

//    props: {
//      title: {
//        type: String,
//        default: ''
//      },
//    }
  }
</script>

